<template>
    <!-- Header Start -->
    <view class="card flex">
        <u-image :src="evaluateInfo?.cover" width="140" height="140"></u-image>
        <view class="ml-[20rpx]">
            <view class="normal font-normal text-xl">{{ evaluateInfo?.name }}</view>
            <view class="mt-[20rpx]">
                <price
                    :content="evaluateInfo?.sellPrice"
                    mainSize="36rpx"
                    minorSize="34rpx"
                    fontWeight="500"
                ></price>
            </view>
        </view>
    </view>
    <!-- Header End -->

    <!-- Main Start -->
    <view class="card mt-[20rpx]">
        <view class="flex">
            <text class="normal font-normal text-md mr-[20rpx]">课程评分</text>
            <u-rate
                :count="5"
                v-model="formData.courseScore"
                :min-count="1"
                inactive-icon="star-fill"
                size="34"
            ></u-rate>
            <view class="ml-4 lighter text-xs">
                <text v-if="formData.courseScore == 5">非常好</text>
                <text v-if="formData.courseScore == 4">好</text>
                <text v-if="formData.courseScore == 3">一般</text>
                <text v-if="formData.courseScore == 2">差</text>
                <text v-if="formData.courseScore == 1">非常差</text>
            </view>
        </view>

        <view class="content mt-[30rpx]">
            <u-input
                v-model="formData.comment"
                type="textarea"
                placeholder="请输入评价内容"
                height="200"
            />
        </view>

        <view class="mt-[30rpx]">
            <uploader
                :mutiple="true"
                v-model="formData.images"
                :maxUpload="6"
                image-fit="aspectFill"
            />
        </view>
    </view>
    <!-- Main End -->

    <!-- Footer Start -->
    <view class="footer mt-[30rpx]">
        <u-button @click="onSubmit" :ripple="true" type="primary" :hair-line="false" shape="circle"
            >提交</u-button
        >
    </view>
    <!-- Footer End -->
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiEvaluateGoodsInfo, apiEvaluateAdd } from '@/api/user'
import Price from '@/components/price/index.vue'
import Uploader from '@/components/uploader/index.vue'
import { toast } from '@/utils/util'

/** Interface Start **/
interface FormDataObj {
    courseId: number
    courseScore: number | string
    comment: string | number
    images: Array<string | null>
    orderId: number
}
/** Interface End **/

/** Data Start **/
const evaluateInfo = ref()
const formData = ref<FormDataObj>({
    courseId: 0,
    courseScore: 0,
    comment: '',
    images: [],
    orderId: 0
})
/** Data End **/

/** Methods Start **/
/**
 * @return { Promise }
 * @description 提交服务评价
 */
const onSubmit = async (): Promise<void> => {
    try {
        if (formData.value.courseScore === 0) return toast('请选择课程评分')
        await apiEvaluateAdd({ ...formData.value })
        await uni.showToast({
            title: '评论成功',
            icon: 'success'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    } catch (error) {
        console.log('提交评价: ', error)
    }
}

/**
 * @return { Promise }
 * @description 获取服务评价商品信息
 */
const initEvaluateGoodsInfo = async (): Promise<void> => {
    try {
        evaluateInfo.value = await apiEvaluateGoodsInfo({ id: formData.value.courseId })
    } catch (error) {
        console.log('获取评价: ', error)
    }
}
/** Methods End **/

/** Life Cycle Start **/
onLoad((options: any) => {
    formData.value.courseId = options.id || 0
    formData.value.orderId = options.orderId
    initEvaluateGoodsInfo()
})
/** Life Cycle End **/
</script>

<style lang="scss">
.card {
    border-radius: 14rpx;
    background-color: $color-white;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 30rpx;

    .content {
        padding: 0 24rpx;
        border-radius: 14rpx;
        background-color: $color-bg-light;
    }
}

.footer {
    padding: 0 30rpx;
}
</style>
